<template>
  <div class="code-box"
       v-show="flag">
    <div id="qrcode"></div>
    <span class="el-icon-circle-close"
          @click="closeBox"></span>
    <div class="text-area"><span>请使用微信扫一扫<br>接收微信推送</span></div>
  </div>
</template>

<style lang="scss">
.code-box {
  position: fixed;
  bottom: 2%;
  right: 2%;
  & > span {
    position: absolute;
    bottom: 150px;
    left: 110px;
    font-size: 25px;
    cursor: pointer;
  }
  & > .text-area {
    text-align: center;
    font-size: 10px;
  }
}
#qrcode {
  display: inline-block;
  border: 1px dashed #58a3f3;
  img {
    width: 120px;
    height: 120px;
    background-color: #fff;
    padding: 10px;
  }
}
</style>

<script>
import { getToken, getUser } from '@/utils/auth'
import { validatenull } from '@/utils/validate'
import QRCode from 'qrcodejs2'

export default {
  data() {
    return {
      currentUser: validatenull(getUser()) ? null : JSON.parse(getUser()),
      flag: true
    }
  },
  name: 'test',
  props: {
    url: {
      type: String,
      default: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9224c10261f029e6&redirect_uri=https://admin.cherongyi360.com/cherongyiAdmin/sys/common/getOpenid?&response_type=code&scope=snsapi_base&state=cherongyi360#wechat_redirect'
    }
  },
  mounted() {
    this.qrcode()
  },
  methods: {
    qrcode() {
      let text = this.url
      if (this.currentUser) {
        text = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9224c10261f029e6&redirect_uri=https://admin.cherongyi360.com/cherongyiAdmin/sys/common/getOpenid/?userId=' + this.currentUser.userId + '&response_type=code&scope=snsapi_base&state=cherongyi360#wechat_redirect'
      }
      const qrcode = new QRCode('qrcode', {
        width: 100,
        height: 100,
        text: text, // 二维码地址
        colorDark: '#000',
        colorLight: '#fff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    closeBox() {
      this.flag = false
    }
  }
}
</script>
